<template>
  <div>
    <div class="remind">
      <div class="remind-title">提醒*</div>
      <div class="remind-content">
        <h1>
          创建提醒邮件模板
        </h1>
        <Row :gutter="20">
          <Col span="12">
            <RadioGroup style="width:100%" v-model="remind.isDefault">
              <div class="radio-item">
                <div class="radio-item-header">
                  <Radio value="0" label="0">默认模板</Radio>
                </div>
                <div class="radio-item-body" v-html="text"></div>
              </div>
              <div class="radio-item">
                <div class="radio-item-header">
                  <Radio value="1" label="1">自定义模板</Radio>
                </div>
                <div class="radio-item-body">
                  <div
                    ref="editorElem"
                    id="websiteEditorElem"
                    style="height: 360px;overflow:hidden"
                  ></div>
                </div>
              </div>
            </RadioGroup>
          </Col>
          <Col span="12">
            <RadioGroup style="width:100%" v-model="remindType">
              <div class="radio-item2">
                <Radio label="提醒日期"></Radio>
                <DatePicker
                  type="date"
                  v-model="remind.startTime"
                  placeholder="Select date"
                  :disabled="remindType != '提醒日期'"
                  style="width: 200px"
                ></DatePicker>
              </div>
              <div class="radio-item2">
                <Radio label="项目截止天数"></Radio>
                <Input
                  v-model="remind.endTime"
                  style="width:300px"
                  :disabled="remindType != '项目截止天数'"
                  placeholder="请输入提醒信息"
                />
              </div>
            </RadioGroup>
          </Col>
        </Row>
      </div>
    </div>
    <br />
    <Button
      type="primary"
      style="float:right;margin:0 10px;"
      @click="pushRemind"
      >完成</Button
    >
  </div>
</template>
<script>
import instance from '@/http/http'
import E from 'wangeditor'
import { formatDate } from '@/utils/methods'
export default {
  data() {
    return {
      disabledGroup: '默认模板',
      remindType: '提醒日期',
      text:
        ' <p>在测试之前，请仔细阅读以下文字：</p> <p>1、进入后设置自己的密码，密码为8位，包含字母+数字；</p><p> 2、测评要假己的行为在工作场景中的表现，而不是生活场景中的自己；</p><p>3、为保证测评结果的有效性，请选择完整时间、安静环境完成作答。</p>',
      remind: {
        msgContent: '',
        startTime: '',
        endTime: '',
        companyId: localStorage.getItem('companyId'),
        itemId: sessionStorage.getItem('itemId'),
        isDefault: '0'
      },
      edit: null
    }
  },
  mounted() {
    this.edit = new E(this.$refs.editorElem)
    this.edit.onchange = function(html) {
      this.remind.msgContent = html
    }
    this.edit.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'justify', // 对齐方式
      'quote', // 引用
      'undo', // 撤销
      'redo' // 重复
    ]
    this.edit.create()
  },
  methods: {
    pushRemind() {
      var data = {
        msgTitle: "您的测评还未完成",
        msgContent:
          this.remind.isDefault == '0' ? this.text : this.edit.txt.html(),
        startTime: this.remind.startTime,
        endTime: this.remind.endTime,
        companyId: this.remind.companyId,
        itemId: sessionStorage.getItem('itemId'),
        isDefault: this.remind.isDefault
      }
      if (data.msgContent) {
         
          data.startTime = data.startTime
            ? formatDate(data.startTime, 'yyyy-MM-DD HH:mm:ss')
            : ''
          instance.post('/item/message/update', data).then(res => {
            if (res.code == 200) {
              this.$Message.success('添加提醒成功')
              this.$router.go(-1)
            } else {
              this.$Message.error('添加提醒失败')
            }
          })
        
      } else {
        this.$Message.error('请输入自定内容')
      }

      console.log(this.edit.txt.html())
      // instance.post('/item/message/update', this.remind).then(res => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.remind {
  width: 100%;
  padding-bottom: 10px;
  line-height: 40px;
  border: 1px solid #5cadff;
  .remind-title {
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    background: #eee;
    line-height: 25px;
    color: #5cadff;
    border-bottom: 1px solid #5cadff;
  }
  .remind-content {
    padding-left: 20px;
    box-sizing: border-box;
    h1 {
      font-size: 20px;
      font-weight: bold;
    }
    .radio-item {
      width: 100%;
      border: 1px solid #999;
      margin-bottom: 20px;
      .radio-item-header {
        line-height: 40px;
        background: #5cadff;
        color: #fff;
        padding-left: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #999;
      }
      .radio-item-body {
        padding: 20px;
        background: #fff;
        line-height: 25px;
      }
    }
    .radio-item2 {
      padding: 10px 20px;
      box-sizing: border-box;
      background: #eee;
    }
  }
}
</style>
